﻿<MCard Class="mx-auto overflow-hidden" Height="400" Width="344">
    <MSystemBar Color="deep-purple darken-3"></MSystemBar>

    <MAppBar Color="deep-purple accent-4" Dark Prominent>
        <MAppBarNavIcon @onclick="() => _drawer = !(_drawer ?? false)"></MAppBarNavIcon>

        <MToolbarTitle>My files</MToolbarTitle>

        <MSpacer></MSpacer>

        <MButton Icon>
            <MIcon>mdi-magnify</MIcon>
        </MButton>

        <MButton Icon>
            <MIcon>mdi-filter</MIcon>
        </MButton>

        <MButton Icon>
            <MIcon>mdi-dots-vertical</MIcon>
        </MButton>
    </MAppBar>

    <MNavigationDrawer @bind-Value="_drawer" Absolute Bottom Temporary>
        <MList Nav Dense>
            <MListItemGroup Value="_value" ValueChanged="ValueChanged" ActiveClass="deep-purple--text text--accent-4">
                <MListItem>
                    <MListItemTitle>Foo</MListItemTitle>
                </MListItem>

                <MListItem>
                    <MListItemTitle>Bar</MListItemTitle>
                </MListItem>

                <MListItem>
                    <MListItemTitle>Fizz</MListItemTitle>
                </MListItem>

                <MListItem>
                    <MListItemTitle>Buzz</MListItemTitle>
                </MListItem>
            </MListItemGroup>
        </MList>
    </MNavigationDrawer>

    <MCardText>
        The navigation drawer will appear from the bottom on smaller size screens.
    </MCardText>
</MCard>

@code
{
    private bool? _drawer;
    private StringNumber _value = default;

    void ValueChanged(StringNumber value)
    {
        _value = value;
        _drawer = false;
    }
}